<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多边形收缩旋转导航栏</title>
    <link type="text/css" rel="stylesheet" href="./index.css">
    <style>
        body {
            height: 100vh;
            background-image: url('./R-C\(17\).jpg');
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>

<body>
    <div class="polygon_nav_box">
        <div class="polygon_nav">
            <div>
                <a class="polygon_nav_a" href="#" target="" style="transform:rotate(0deg);">
                    <span>选项1</span>
                </a>
            </div>
            <div>
                <a class="polygon_nav_a" href="javascript:;" target="" style="transform:rotate(0deg);">
                    <span>选项2</span>
                </a>
            </div>
            <div>
                <a class="polygon_nav_a" href="javascript:;" target="" style="transform:rotate(0deg);">
                    <span>选项3</span>
                </a>
            </div>
            <div>
                <a class="polygon_nav_a" href="javascript:;" target="" style="transform:rotate(0deg);">
                    <span>选项4</span>
                </a>
            </div>
            <div>
                <a class="polygon_nav_a" href="javascript:;" target="" style="transform:rotate(0deg);">
                    <span>选项5</span>
                </a>
            </div>
            <div>
                <a class="polygon_nav_a" href="javascript:;" target="" style="transform:rotate(0deg);">
                    <span>选项6</span>
                </a>
            </div>
            <div>
                <a class="polygon_nav_a" href="javascript:;" target="" style="transform:rotate(0deg);">
                    <span>选项7</span>
                </a>
            </div>
            <div>
                <a class="polygon_nav_a" href="javascript:;" target="" style="transform:rotate(0deg);">
                    <span>选项8</span>
                </a>
            </div>
            <div>
                <a class="polygon_nav_a" href="javascript:;" target="" style="transform:rotate(0deg);">
                    <span>选项9</span>
                </a>
            </div>
            <div>
                <a class="polygon_nav_a" href="javascript:;" target="" style="transform:rotate(0deg);">
                    <span>选项10</span>
                </a>
            </div>
            <div>
                <a class="polygon_nav_a" href="javascript:;" target="" style="transform:rotate(0deg);">
                    <span>选项11</span>
                </a>
            </div>
            <div>
                <a class="polygon_nav_a" href="javascript:;" target="" style="transform:rotate(0deg);">
                    <span>选项12</span>
                </a>
            </div>
        </div>
        <div class="spread_btn">点击展开</div>
    </div>
    <script type="text/javascript" src="./index.js"></script>
</body>

</html>